import { View, Text, TextInput, StyleSheet, TouchableHighlight } from 'react-native'
import React, { useState } from 'react'
import Icon from 'react-native-vector-icons/FontAwesome'
import Icon2 from 'react-native-vector-icons/MaterialCommunityIcons'
// 导入组件
import Neraby from '../components/Neraby'
import Attention from '../components/Attention'
import DynamicState from '../components/DynamicState'
export default function Gocircle(props) {
  const { componentId } = props
  const [searchValue, setSearchValue] = useState()
  const [holderValue, setHolderValue] = useState('请输入内容')
  // 输入框内容发生变化时的回调
  const onChangeText = text => {
    setSearchValue(text)
    console.log(text);
  }
  const tabs = [{ id: 1, title: '附近' }, { id: 2, title: '关注' }, { id: 3, title: '动态' }]
  // 获取当前点击的tab
  const [tabbool, setTabbool] = useState(1)
  // 返回要渲染的的Tabs组件
  const showTabsComponent = (componentId) => {
    switch (tabbool) {
      case 1:
        return <Neraby componentId={componentId} />;
      case 2:
        return <Attention componentId={componentId} />;
      case 3:
        return <DynamicState componentId={componentId} />
    }
  }

  return (
    <View style={styles.container}>
      {/* 顶部的搜索框 */}
      <View style={styles.header}>
        <View style={styles.headerSearch}>
          <Icon style={styles.searchIcon} name='search' size={20} />
          <TextInput
            style={styles.textInput}
            value={searchValue}
            placeholder={holderValue}
            inlineImagePadding={5}
            returnKeyType='search'
            onChangeText={text => onChangeText(text)}
          />
        </View>
        <View style={styles.rightIcon}>
          <Icon style={styles.icon} name='user' size={30} />
          <Icon2 style={styles.icon} name='email-newsletter' size={30} />
        </View>
      </View>
      {/* 选项卡 */}
      <View style={styles.selectTab}>
        {tabs.map(item => {
          return (
            <TouchableHighlight underlayColor={0} key={item.id} style={styles.itemTab} onPress={() => { setTabbool(item.id) }}>
              <View>
                <Text style={tabbool == item.id ? styles.textTabs : styles.textTab}>{item.title}</Text>
                <View style={tabbool == item.id ? styles.tabBlack : ''} />
              </View>
            </TouchableHighlight>
          )
        })}
      </View>
      {/* Tabs内容区域 */}
      <View>
        {showTabsComponent(componentId)}
      </View>
    </View>
  )
}

Gocircle.options = {
  topBar: {
    title: {
      text: 'Go圈'
    },
    visible: false
  },
  statusBar: {
    // visible: false
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    margin: 20
  },
  headerSearch: {
    width: 260,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#00000060',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  searchIcon: {
    color: '#fff',
    marginLeft: 10,
    marginRight: 10,
  },
  textInput: {
    width: 200,
    fontSize: 14,
  },
  rightIcon: {
    display: 'flex',
    flexDirection: 'row'
  },
  icon: {
    color: '#656565',
    marginLeft: 8,
    marginTop: 5
  },
  selectTab: {
    height: 60,
    backgroundColor: '#00000010',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  itemTab: {
    width: 60,
    height: 60,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: '#fff'
  },
  textTabs: {
    fontSize: 16,
    color: '#007acc',
    fontWeight: '600',
  },
  textTab: {
    fontSize: 14,
    color: '#000',
  },
  tabBlack: {
    width: 30,
    height: 5,
    marginTop: 5,
    borderRadius: 2,
    backgroundColor: '#007acc'
  },
  open: {
    transform: 'translateX(100)',
    transition: 'all ease 0.5s'
  },
  close: {
    transform: 'translateX(0)',
    transition: 'all ease 0.5s'
  }
})